<template>
  <view>
    <view class="flex items-center w-full justify-between">
      <view class="flex items-center gap-8">
        <u-avatar size="56rpx"></u-avatar>
        <u-text mode="name" text="张三三" format="encrypt"></u-text>
        <u-tag mode="primary" plain text="购买2次" size="mini"></u-tag>
      </view>
      <view class="text-12">8分钟前评价</view>
    </view>
    <view class="flex mt-10 rate-box">
      <u-rate
        :count="5"
        :value="5"
        size="36rpx"
        gutter="4rpx"
        active-color="#f6dc67"
        allowHalf
      ></u-rate>
      <text class="ml-4 text-12 color-gray">惊艳,列为惊艳商品</text>
    </view>
    <view class="text-14 pt-10"> 这里是商品评价内容 </view>
    <view class="text-12 pt-10 color-gray"> 已购: (50ml*10袋) /盒</view>
    <view class="pt-10">
      <u-album :urls="urls2"></u-album>
    </view>
    <view class="merchant-reply mt-16">
      <text class="text-14 color-black text-bold">商家回复：</text>
      <text class="text-14 color-gray">
        感谢您的支持，我们会继续努力，为您带来更好的服务。
      </text>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      urls2: [
        "https://cdn.uviewui.com/uview/album/1.jpg",
        "https://cdn.uviewui.com/uview/album/2.jpg",
        "https://cdn.uviewui.com/uview/album/3.jpg",
        "https://cdn.uviewui.com/uview/album/4.jpg",
        "https://cdn.uviewui.com/uview/album/5.jpg",
        "https://cdn.uviewui.com/uview/album/6.jpg",
        "https://cdn.uviewui.com/uview/album/7.jpg",
        "https://cdn.uviewui.com/uview/album/8.jpg",
        "https://cdn.uviewui.com/uview/album/9.jpg",
        "https://cdn.uviewui.com/uview/album/10.jpg",
      ],
    };
  },
};
</script>

<style lang="scss" scoped>
.rate-box {
  padding: 10rpx;
  background-color: #f9f9f9;
  border-radius: 4rpx;
}
.merchant-reply {
  padding: 10rpx;
  background-color: #f9f9f9;
  border-radius: 4rpx;
  position: relative;
  &::before {
    content: "";
    position: absolute;
    width: 0;
    height: 0;
    border-left: 12rpx solid transparent;
    border-right: 12rpx solid transparent;
    border-bottom: 12rpx solid #f9f9f9;
    top: -12rpx;
    left: 60rpx;
  }
}
</style>
